<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>beginAjax</title>

<style>
#result{
	width: 400px;
	height: 300px;
	border: 1px solid orange;
	border-radius: 10px;
}
#result:HOVER{
		box-shadow: 5px 5px 10px #bbbbbb;
}
#btnCreate{
	width: 400px;
	height: 40px;
}
</style>

<script>
function init(){
	var rs = document.getElementById("result");
	var btn = document.getElementById("btnCreate");
	
	btn.onclick = function(){
		if(window.activeXObject){
			rs.innerHTML = "<br/>IE 계열 브라우저 입니다.";
		}else{
			rs.innerHTML = "<br/>표준 브라우저 입니다.";
		}
		
		xhr = new XMLHttpRequest();
		rs.innerHTML += "<p/><font color='blue'>XMLHttpRequest 객체가 생성되었습니다.</font>";
	}
}
</script>

</head>
<body>
<input type="button" value="XMLHttpRequest 객체생성" id="btnCreate"><p/><br/>
<div id="result"></div>

<script> init() </script> 
</body>
</html>